<template>
  <div>
    <div class="container">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input size="small" v-model.trim="searchParams.productName"></el-input>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input size="small" v-model.trim="searchParams.productNo"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchParams.productState" clearable size="small">
            <el-option label="全部" :value="99"></el-option>
            <el-option label="上架" :value="0"></el-option>
            <el-option label="下架" :value="-1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="searchTable">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" size="small" @click="refresh">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-plus" size="small" @click="showAddProduct">添加</el-button>
        </el-form-item>
      </el-form>
      <div class="table-origin">
        <my-table ref="myTableRef" stripe border highlight-current-row align="center" size="medium" :columns="columns"
          :loader="loader" :page-size="pageSize" :page="page"
          :pagination="{layout:'->, total, sizes, prev, pager, next, jumper',pageSizes: [10, 30, 50, 100]}">
          <template v-slot:state="{row}">
            <el-tag size="mini" effect="dark" type="success" v-if="row.productState==0">上架</el-tag>
            <el-tag size="mini" effect="dark" type="danger" v-else>下架</el-tag>
          </template>
          <template v-slot:operate="{row}">
            <el-button v-if="row.productState==-1" plain type="success" size="mini" @click="online(row)">上架</el-button>
            <el-button v-if="row.productState==0" plain type="warning" size="mini" @click="offline(row)">下架</el-button>
            <el-button v-if="row.productState==-1" plain type="warning" size="mini" @click="showEdit(row)">编辑</el-button>
            <el-button v-if="row.productState!=-1" plain size="mini" @click="showInfo(row)">详情</el-button>
          </template>
          <template v-slot:installState="{row}">
            {{row.installState=='0'?'否':'是'}}
          </template>
        </my-table>
      </div>
    </div>
    <addProduct ref="addProductRef"></addProduct>
    <productInfo ref="productInfoRef"></productInfo>
  </div>
</template>

<script>
  import addProduct from './core/addProduct.vue'
  import productInfo from './core/productInfo.vue'
  import {
    listProduct,
    onlineProduct,
    offlineProduct
  } from '@/api/mall.product.js'
  export default {
    components: {
      addProduct,
      productInfo
    },
    data() {
      return {
        page: 1,
        pageSize: 10,
        columns: [{
            label: '序号',
            type: 'index',
            index: (index) => {
              return ((this.page - 1) * this.pageSize + index + 1)
            },
            align: 'center',
            fixed: 'left',
            width: 50
          },
          {
            label: '商品名称',
            prop: 'productName',
            align: 'left'
          },
          {
            label: '商品编号',
            prop: 'productNo',
            align: 'left',
            width: 140
          },
          {
            label: '商品原价',
            prop: 'productPrice',
            align: 'right',
            width: 80
          },
          {
            label: '活动优惠价格',
            prop: 'productDiscount',
            align: 'right',
            width: 120
          },
          {
            label: '尺寸/规格',
            prop: 'specification',
            align: 'center'
          },
          {
            label: '是否包安装',
            prop: 'installState',
            align: 'center',
            width: 100
          },
          {
            label: '添加时间',
            prop: 'createTime',
            align: 'center',
            width: 150
          },
          {
            label: '修改时间',
            prop: 'updateTime',
            align: 'center',
            width: 150
          },
          {
            label: '状态',
            prop: 'state',
            align: 'center',
            width: 100
          },
          {
            label: '操作',
            prop: 'operate',
            align: 'left',
            fixed: 'right',
            width: 160
          }
        ],
        searchParams: {
          productName:undefined,
          productNo:undefined,
          productState:undefined,
        }
      }
    },
    methods: {
      // 加载数据
      async loader(page, pageSize) {
        var params = Object.assign(this.searchParams, {
          page,
          pageSize
        });
        var res = await listProduct(params);
        this.page = page;
        this.pageSize = pageSize;
        return res.data;
      },

      refresh(){
        this.searchParams={
          productName:undefined,
          productNo:undefined,
          productState:undefined,
        },
        this.searchTable();
      },

      searchTable() {
        this.$refs.myTableRef.refresh(this.page);
      },
      showAddProduct() {
        this.$refs.addProductRef.open();
      },
      // 编辑
      showEdit(row) {
        this.$refs.addProductRef.open(row.productId);
      },
      // 详情
      showInfo(row) {
        this.$refs.productInfoRef.open(row.productId);
      },

      online(row) {
        this.$confirm('确认上架?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async () => {
          var res = await onlineProduct(row.productId)
          this.$utils.showSuccessMessage(res.msg);
          this.searchTable();
        });
      },
      offline(row) {
        this.$confirm('确认下架?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async () => {
          var res = await offlineProduct(row.productId)
          this.$utils.showSuccessMessage(res.msg);
          this.searchTable();
        });
      },

    }
  }
</script>

<style scoped>
  .container {
    padding: 15px;
  }
</style>
